import * as React from 'react';
import {useEffect, useState} from 'react';
import BackendProLayout from "@/components/backend-pro-layout/BackendProLayout";
import {renderRoutesMap, RouteCompProps} from "central-react-router";
import {MenuData, MenuItemClickParams} from "@/components/backend-pro-layout/BackendProMenu";
import {PieChartOutlined} from "@ant-design/icons";

interface Props extends RouteCompProps {
    name: string
}

const mockMenuDataArr: MenuData[] = [
    {
        name: 'Dashboard', customData: {link: ''}, key: "1", icon: <PieChartOutlined/>,
        children: [
            {
                name: '分析页', customData: {link: '/analysis'}, key: "11"
            }
        ]
    },
    {
        name: '表单', key: "2", icon: <PieChartOutlined/>, children: [
            {name: '复杂表单', customData: {link: '/form/ComplexForm'}, key: "21"},
            {name: '分步表单', customData: {link: '/form/StepForm'}, key: "22"},
        ]
    },
    {name: '下载', customData: {link: '/download'}, key: "3", icon: <PieChartOutlined/>},
    {
        name: '菜单4', customData: {link: ''}, key: "4", icon: <PieChartOutlined/>, children: [
            {name: '菜单4-1', customData: {link: ''}, key: "41"},
            {name: '菜单4-2', customData: {link: ''}, key: "42"},
            {name: '菜单4-3', customData: {link: ''}, key: "43"}
        ]
    }
];

const App: React.FC<Props> = (props) => {
    const {history, route} = props;
    const [menuDataArr, setMenuDataArr] = useState<MenuData[]>([]);
    const [openKeys, setOpenKeys] = useState<string[]>(['2']);
    const [selectedKeys, setSelectedKeys] = useState<string[]>(['21']);

    const onMenuItemClick = (params: MenuItemClickParams, curMenuItemData: any) => {
        if (curMenuItemData && curMenuItemData.customData && curMenuItemData.customData.link) {
            history.push(curMenuItemData.customData.link)
        }
    }

    useEffect(() => {
        setTimeout(() => {
            // 模拟网络延迟
            setMenuDataArr(mockMenuDataArr);
        }, 3000);
    }, [])

    return <BackendProLayout
        defaultOpenKeys={openKeys}
        defaultSelectedKeys={selectedKeys}
        onMenuItemClick={onMenuItemClick}
        menuDataArr={menuDataArr}
        customHeaderRightComp={<div>hello</div>}
        customFooter={<div style={{textAlign: 'center'}}>Created by 潘志勇</div>}>
        {renderRoutesMap(route.routes)}
    </BackendProLayout>
}

export default App;
